/*$$

{"color":[{"val":"#ffffff","title":"默认标题文字颜色/WAP端鼠标滑过标题颜色"},

{"val":"#131415","title":"鼠标滑过标题文字颜色"},

{"val":"#000000","title":"WAP端默认标题"}],

"background":[{"val":"#233c82","title":"按钮背景颜色"}],

"border":[{"val":"#233c82","title":"按钮边框"},

{"val":"#ffffff","title":"按钮边框"}]}

$$*/

#service_146{

	width: 100%;

	height: 100%;

	position: relative;

}

#service_146 .services{

	position: absolute;

	width: 1920px;

	height: 100%;

	left: 50%;

	transform: translateX(-50%);

	overflow: hidden;

	max-height: 780px;

	bottom: 0;

}

#service_146 .services .s1{

	width: 627px;

	position: absolute;

	left: 0;

	z-index: 50;

}

#service_146 .services .s2{

	width: 627px;

	position: absolute;

	left: 333px;

	z-index: 40;

}

#service_146 .services .s3{

	width: 627px;

	position: absolute;

	left:634px;

	z-index: 30;

}

#service_146 .services .s4{

	width: 850px;

	position: absolute;

	left:1070px;

	z-index: 20;

}

#service_146 .serItem::before{

	position: absolute;

	width: 100%;

	height: 100%;

	left: 0;

	background: url(./../../../static/images/IC00022_05.png) no-repeat right top;

	content: '';

	opacity: 0.95;

	transition: all 0.8s;

	/* transition-delay: 1s; */

	

}

#service_146 .serItem:last-child::before{

	background: url(./../../../static/images/IC00022_06.png) no-repeat left top;

}

#service_146 .serItem:hover::before,

#service_146 .serItem.active::before{

	width: 300px;

	

}

#service_146 .serItem:first-child:hover::before,

#service_146 .serItem:last-child.active::before{

	width: 0;

}

#service_146 .serItem .s_con{

	position: absolute;

	z-index: 99;

	width: 300px;

	top:50%;

	height: 300px;

	margin-top: -150px;

	padding-left: 85px;

	display: flex;

	flex-direction: column;

	justify-content: center;

}



#service_146 .serItem:not(.s4) .s_con{

	right: 0;

}

#service_146 .serItem.s4 .s_con{

	left: 190px;

}

#service_146 .s_con .title{

	line-height: 72px;

	font-size:20px;

	color: #ffffff;

	transition: all 1s;

	position: relative;

	z-index: 10;

}

#service_146 .s_con .more{

	width: 60px;

	height: 60px;

	border-radius: 50%;

	border:#ffffff solid 1px;

	background: url(./../../../static/images/IC00022_11.png) no-repeat center center;

	position: relative;

	z-index: 10;

}

#service_146 .s_con .more::before{

	position: absolute;

	left: 50%;

	top:50%;

	width: 0;

	height: 0;

	content: '';

	background: #233c82 url(./../../../static/images/IC00022_11.png) no-repeat center center;

	border-radius: 50%;

	transition: all 1s;

}

#service_146 .serItem:hover .more::before,

#service_146 .serItem.active .more::before{

	width: 100%;

	height: 100%;

	left: 0;

	top:0;

}

#service_146 .s_con .icon{

	width: 100%;

	height: 45px;

	position: relative;

	overflow: hidden;

	display: block;

	z-index: 10;

}

#service_146 .s_con .icon img{

	transition: all 1s;

	position: absolute;

	top:0;

}

#service_146 .s_con .c2{

	left: 0;

}

#service_146 .s_con .c1{

	left:calc(100% + 60px);

}

#service_146 .serItem:hover .c2,

#service_146 .serItem.active .c2{

	left: -60px;

}

#service_146 .serItem:hover .c1,

#service_146 .serItem.active .c1{

	left: 0;

}



#service_146 .serItem:hover .title,

#service_146 .serItem.active .title{

	color: #131415;

	text-shadow: 2px 2px 1px #ffffff;

}

#service_146 .wapservice{

	width: 100%;

	display: grid;

	grid-template-columns: repeat(2,1fr);

	padding: 5px;

	display: none;

}

#service_146 .serLi{

	width: calc(100% - 10px);

	margin: 5px;

	height: 190px;

	position: relative;

	border-radius: 5px;

	overflow: hidden;

}

#service_146 .serLi .poster{

	width: 100%;

	height: 100%;

	object-fit: cover;

}

#service_146 .serLi .s_con{

	width: 100%;

	height: 100%;

	position: absolute;

	left: 0;

	top:0;

	padding:35px 20px;

}

#service_146 .serLi .s_con::before{

	background:linear-gradient(to right, #647ab8, #233c82);;

	width:0;

	height: 100%;

	content: '';

	position: absolute;

	right: 0;

	top:0;

	transition: all 1s;

}

#service_146 .serLi:hover .s_con::before{

	width: 100%;

}

#service_146 .serLi .s_con .title{

	line-height: 40px;

	font-size: 20px;

	color: #000000;

	position: relative;

	z-index: 10;

}

#service_146 .serLi:hover .s_con .title{

	color: #ffffff;

}

#service_146 .serLi .s_con .more{

	width: 36px;

	height: 36px;

	background: #233c82 url(./../../../static/images/IC00022_11.png) no-repeat center center;

	border:#233c82 solid 1px;

}

#service_146 .serLi:hover .s_con .more{

	border:#ffffff solid 1px;

	background:url(./../../../static/images/IC00022_11.png) no-repeat center center;

}

#service_146 .serLi:hover .c2,

#service_146 .serLi.active .c2{

	left: -60px;

}

#service_146 .serLi:hover .c1,

#service_146 .serLi.active .c1{

	left: 0;

}

@media screen and (max-width: 1200px) {

	

}

@media screen and (max-width: 1024px) {

	#service_146{

		height: 400px;

	}

	#service_146 .services{

		width: 100%;

		display: none;

	}

	#service_146 .services .s1{

		width: 160px;

	}

	#service_146 .serItem::before{

		background-size: 160px auto;

	}

	#service_146 .wapservice{

		display: grid;

	}

}